<template>
    <div class="edu-page-warp">
        <filter-card :options="options" :buttons="buttons" :queryForm="queryForm"></filter-card>
        <div class="edu-page-title mg-top">学生激活信息列表</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-row class="border-bottom" style="height:56px;">
                <el-col :span="4">
                    <el-input
                        v-model="queryForm.keyWord"
                        placeholder="学号或姓名搜索"
                        prefix-icon="el-icon-search"
                        @keyup.enter.native="initTableData"
                    />
                </el-col>
                <el-col :span="20">
                    <div class="float-right">
                        <el-button type="primary" @click="exportItem">导出</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table :data="data">
                <el-table-column label="学号">
                    <template slot-scope="scope">{{ scope.row.studentId }}</template>
                </el-table-column>
                <el-table-column label="姓名">
                    <template slot-scope="scope">{{ scope.row.studentName }}</template>
                </el-table-column>
                <el-table-column label="年级">
                    <template slot-scope="scope">{{ scope.row.grade}}</template>
                </el-table-column>
                <el-table-column label="学院">
                    <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
                </el-table-column>
                <el-table-column label="专业">
                    <template slot-scope="scope">{{ scope.row.professionI18n}}</template>
                </el-table-column>
                <el-table-column label="培养层次">
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n}}</template>
                </el-table-column>
                <el-table-column label="培养类别">
                    <template slot-scope="scope">{{ scope.row.trainingCategoryI18n}}</template>
                </el-table-column>
                <el-table-column label="是否国际生">
                    <template slot-scope="scope">{{ scope.row.isOverseas | yesOrNo}}</template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="viewDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        :total="totalCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:10px 60px 0 0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import * as API from "common/src/api/studentAcitivity";
import filterCard from "./FilterCard";
import utils from "common/src/utils/utils";
import { yesOrNo } from "common/src/filters/commonFilter";
import { queryDic } from "common/src/api/dictionary";
export default {
    components: { filterCard },
    name: "activityExplain",
    data() {
        const getGrade = (function() {
            const now = new Date().getFullYear();
            const years = [];
            for (let i = 0; i < 6; i++) {
                years.push({
                    label: now - i,
                    value: now - i
                });
            }
            return years;
        })();
        return {
            data: [],
            options: [
                {
                    label: "年级：",
                    key: "grade",
                    data: getGrade
                },
                {
                    label: "培养层次：",
                    key: "trainingLevel",
                    data: []
                },
                {
                    label: "培养类别：",
                    key: "trainingCategory",
                    data: []
                },
                {
                    label: "学院：",
                    key: "faculty",
                    data: [],
                    changeCallback: this.changeFaculty
                },
                {
                    label: "专业：",
                    key: "profession",
                    data: []
                },
                {
                    label: "国际学生：",
                    key: "isOverseas",
                    data: [{ label: "是", value: 1 }, { label: "否", value: 0 }]
                },
                {
                    label: "激活时间：",
                    key: "activationTime",
                    type: "datePicker"
                }
            ],
            buttons: [
                {
                    clickCallback: this.reset,
                    text: this.$t("message.reset")
                },
                {
                    clickCallback: this.initTableData,
                    text: this.$t("message.filter")
                }
            ],
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                grade: "",
                trainingLevel: "",
                trainingCategory: "",
                faculty: "",
                profession: "",
                isOverseas: "",
                activationTime: ""
            }
        };
    },
    mounted() {
        this.initOptions();
        this.initTableData();
    },
    methods: {
        async initTableData() {
            console.log(this.queryForm);
            API.getActivityStudentList(this.queryForm).then(response => {
                let {
                    code,
                    data: { list, total_ }
                } = response;
                if (code === 200) {
                    this.data = list;
                    this.totalCount = total_;
                }
            });
        },
        changeFaculty(val) {
            let profession = this.options.find(e => e.key === "profession");
            profession.data = [];
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: [val],
                    specilaCode: "XY2ZY"
                }
            };
            queryDic(data).then(res => {
                if (res.code === 200) this._fill("profession", res.data.G_ZY);
            });
        },
        initOptions() {
            let params = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC", "X_YX", "X_PYLB"]
            };
            queryDic(params).then(response => {
                let { code, data } = response;
                if (code === 200) {
                    this.fillSelect(data);
                }
            });
        },
        fillSelect(data) {
            let { X_PYCC, X_YX, X_PYLB } = data;
            this._fill("trainingLevel", X_PYCC);
            this._fill("faculty", X_YX);
            this._fill("trainingCategory", X_PYLB);
        },
        _fill(type, data) {
            let option = this.options.find(e => e.key === type);
            let d = [];
            for (const key in data) {
                d.push({
                    value: key,
                    label: data[key]
                });
            }
            option.data = d;
        },

        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.initTableData();
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.initTableData();
        },
        reset() {
            this.queryForm.classId = "";
            this.queryForm.typeId = "";
            this.queryForm.pageNum_ = 1;
            this.queryForm.pageSize_ = 20;
            this.queryForm.grade = "";
            this.queryForm.trainingLevel = "";
            this.queryForm.faculty = "";
            this.queryForm.profession = "";
            this.queryForm.isLeaveStudent = "";
            this.queryForm.keyWord = "";
            this.initTableData();
        },
        exportData() {},
        isAllKeyEmpty(obj = {}) {
            return !!Object.values(obj).join("");
        }
    },
    filters: {
        yesOrNo
    }
};
</script>
<style>
</style>
